<template>
	<el-collapse-transition>
		<div v-show="isOpen" class="transition-box" ref="data-grid-box">
			<div class="data-grid-content">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="公共概览" name="public">
						<grid-tree :overviewGroupType="0"></grid-tree>
					</el-tab-pane>
					<el-tab-pane label="我的概览" name="person">
						<grid-tree :overviewGroupType="1"></grid-tree>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</el-collapse-transition>
</template>

<script>
	import gridTree from "./gridTree";

	export default {
		name: "dataGirdMenu",
		data() {
			return {
				appId: null,
				activeName: "public",
				overviewGroupType: 0,
			}
		},
		components: {
			gridTree
		},
		props: {
			isOpen: {
				type: Boolean
			},
			collapse: {
				type: Boolean
			}
		},
		computed: {
			appItem() {
				return this.$store.state.global.appItem;
			}
		},
		watch: {
			isOpen: {
				handler(val) {
					console.log(val);
					this.show = true;
				},
				immediate: true
			},
			collapse: {
				handler(val) {
					if (val) {
						this.show = false;
					}
					this.handleGridBox(val);
				},
				immediate: true
			},
			appItem: {
				handler() {
					this.activeName = "public";
				},
				// immediate: true,
				// deep: true
			}
		},
		created() {
			alert(1)
		},
		methods: {
			handleClick(tab) {
				let {name} = tab;
				this.overviewGroupType = name === "public" ? 0 : 1;
				this.$store.commit("SET_OVERVIEW_GROUP_TYPE", this.overviewGroupType);
			},
			handleGridBox(val) {
				this.$nextTick(() => {
					let dataGrid = document.querySelector(".data-grid");
					let top = dataGrid.offsetTop + 60;
					let gridBox = this.$refs["data-grid-box"];
					if (val) {
						gridBox.style.position = "fixed";
						gridBox.style.left = "64px";
						gridBox.style.top = top + "px";
						gridBox.style.zIndex = 10;
						gridBox.style.margin = "0 5px";
					} else {
						gridBox.style.position = "static";
						gridBox.style.left = "64px";
						gridBox.style.top = top + "px";
						gridBox.style.zIndex = 10;
						gridBox.style.margin = "0";
					}
				})
			},
			handleSelectItem() {
				this.$emit("select", true);
			}
		}
	}
</script>

<style lang="scss">
	.data-grid-content {
		padding: 15px 20px;
		background: #353e4f;
		color: rgb(255, 255, 255);
		font-size: 12px;

		.el-tabs__nav-wrap {
			&::after {
				background-color: transparent;
			}
		}

		.el-tabs__item {
			color: rgb(255, 255, 255);

			&.is-active {
				color: #01b27a;
			}
		}

		.btn-content {
			text-align: center;
			margin-top: 5px;
		}

		.el-tree {
			background-color: transparent;
			color: #fff;

			.el-tree-node:focus > .el-tree-node__content {
				/*background-color: #e5f9f4;*/
				/*color: #01b27a;*/
				background-color: transparent;
			}

			.el-tree-node__content {
				&:hover {
					background-color: transparent;
				}
			}

			.custom-tree-node {
				flex-grow: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 12px;
				overflow-x: hidden;

				.tree-node-label {
					-ms-text-overflow: ellipsis;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.tree-node-icon {
					position: relative;
				}

				i[class^="el-icon-"] {
					font-size: 12px;
					width: auto;
				}
			}
		}

		.el-tree--highlight-current .el-tree-node > .el-tree-node__content {
			.custom-tree-node.active {
				color: #01b27a;
			}
		}

		.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
			background-color: transparent;
			color: #fff;

			.custom-tree-node.active {
				color: #01b27a;
			}
		}
	}
</style>
